<template>
    
        <header>
            <!-- 头部logo -->
            <h1>
                <img src="@/assets/images/logo.png" alt="">
            </h1>
            <!-- 头部中间搜索框 -->
            <div class="search" @click="goSearch">
                <i class="iconfont icon-sousuo"></i>
                <span>搜您喜欢的...</span>
            </div>
            <!-- 头部右侧 -->
            <div class="kefu">
                <i class="iconfont icon-kefu"></i>
            </div>
        </header>  
</template>

<script>
export default {
    name:'Header',
    methods:{
        goSearch(){
            this.$router.push('/search')
        },
    }
}
</script>

<style lang="less" scoped>
@rootsize:37.5rem;
header{
    display: flex;
    justify-content:space-around;
    align-items: center;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: (55 / @rootsize);
    background-color: #b0352f;
    z-index:999;
    h1{
        display: flex;
        align-items: center;
        width: (100/ @rootsize);
        height: (55/ @rootsize);
        img{
            width: 100%;
            height: (55/ @rootsize);           
        }
    }
    .search{
        display: flex;
        align-items: center;
        width: (230 / @rootsize);
        height: (30 / @rootsize);
        background-color: #fff;
        border-radius: (12 / @rootsize);
        i{
            padding: 0 (8 / @rootsize);
            color: #ccc;
        }
        span{
            font-size: (14 / @rootsize);
            color: #ccc;
        }
    }
    .kefu{
        i{
            font-size: (25 / @rootsize);
            color: #fff;
        }
    }
}
</style>